<template>
  <div>
    <!-- banner -->
    <div class="archive-banner banner">
      <h1 class="banner-title">归档</h1>
    </div>
    <!-- 热力图 -->
    <v-card class="blog-container hi">
      <div class="Echarts">
        <div id="main" style="width: 900px; height: 250px"></div>
      </div>
    </v-card>
    <!-- 归档列表 -->
    <v-card class="blog-container top">
      <timeline>
        <timeline-title> 目前共计{{ count }}篇文章，继续加油 </timeline-title>
        <timeline-item v-for="item of archiveList" :key="item.id">
          <!-- 日期 -->
          <span class="time">{{ item.createdAt | date }}</span>
          <!-- 文章标题 -->
          <router-link
            :to="`/articles/list/${item._id}`"
            style="color: #666; text-decoration: none"
          >
            {{ item.title }}
          </router-link>
        </timeline-item>
      </timeline>
      <!-- 分页按钮 -->
      <v-pagination
        color="#00C4B6"
        v-model="current"
        :length="Math.ceil(count / 6)"
        total-visible="7"
      />
    </v-card>
  </div>
</template>

<script>
import { Timeline, TimelineItem, TimelineTitle } from "vue-cute-timeline";
export default {
  created() {
    this.listArchives();
  },
  mounted() {
    this.myEcharts();
  },
  components: {
    Timeline,
    TimelineItem,
    TimelineTitle,
  },
  data: function () {
    return {
      current: 1,
      count: 0,
      archiveList: [],
    };
  },
  methods: {
    async listArchives() {
      const res = await this.$http.get(`articles/${this.current}`);
      this.archiveList = res.data.list;
      this.count = res.data.totalArticles;
    },
    async myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));
      let date = new Date();
      let year = date.getFullYear();
      // 指定图表的配置项和数据
      var option = {
        title: {
          top: 30,
          left: "center",
          text: year + "年发布博文分布统计",
        },
        tooltip: {},
        visualMap: {
          min: 0,
          max: 100,
          type: "continuous",
          orient: "horizontal",
          left: "center",
          top: 65,
          textStyle: {
            color: "#000",
          },
        },
        calendar: {
          top: 130,
          left: 30,
          right: 30,
          cellSize: ["auto", 16],
          range: year,
          itemStyle: {
            borderWidth: 0.5,
          },
          yearLabel: { show: false },
        },
        series: {
          type: "heatmap",
          coordinateSystem: "calendar",
          data: await this.getVirtulData(),
        },
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    async getVirtulData() {
      const res = await this.$http.get("articles/list");
      let dateArray = [];
      res.data.forEach((v) => {
        dateArray.push(v.createdAt.slice(0, 10));
      });
      let arrList = this.findYear(dateArray);
      return arrList;
    },
    findYear(arr) {
      var res = [];
      arr.sort();
      for (var i = 0; i < arr.length; ) {
        var count = 0;
        for (var j = i; j < arr.length; j++) {
          if (arr[i] == arr[j]) {
            count++;
          }
        }
        res.push([arr[i], count]);
        i += count;
      }
      return res;
    },
  },
  watch: {
    async current(value) {
      const res = await this.$http.get(`/articles/${value}`);
      this.archiveList = res.data.list;
      this.count = res.data.totalArticles;
    },
  },
};
</script>

<style scoped>
.top {
  margin-top: 0;
}
.archive-banner {
  background: url(https://2u-blog.oss-cn-beijing.aliyuncs.com/%E8%83%8C%E6%99%AF%E5%9B%BE/sp%E5%A7%91%E8%8E%B7%E9%B8%9F.jpg)
    center center / cover no-repeat;
  background-color: #49b1f5;
}
.time {
  font-size: 0.75rem;
  color: #49B1F5;
  margin-right: 1rem;
}
@media (max-width: 759px) {
  .hi{
    display: none;
  }
  .top {
    margin-top: 250px;
  }
}
</style>
